<template>
    <nav>
    <div class="mydiv">
        <nav class="mynav" style="overflow:hidden">
            <router-link active-class="active" to="/index" class="nav1" exact>武器首页</router-link>
            <router-link active-class="active" to="/goods" class="nav1" exact>饰品市场</router-link>
            <router-link active-class="active" to="/userindex/account" class="nav1" exact>个人中心</router-link>
            <router-link active-class="active" to="/help/shiming" class="nav1" exact>帮助中心</router-link>
            <div>
                <div v-if="shownav==true">
                    <router-link active-class="active" to="/register" class="nav2">注册</router-link>
                    <router-link active-class="active" to="/login" class="nav2">登录</router-link>
                </div>
                <div v-else>
                    <el-button  @click="exc" style="float:right;margin-top: 10px;" type="primary">退出登录</el-button>
                    <span class="myspan">{{shuju.name}}</span>
                    <img :src="'http://localhost:3000/upload/'+shuju.headpic" alt="" width="32px" height="32px" class="myimg" @click="exc">
                    
                </div>
            </div>
        </nav>
    </div>
</nav>
</template>
<script>
export default {
    name: 'MynavView',
    data() {
        return {
            user: {},
            shownav: true,
        }
    },
    created() {
        this.user = JSON.parse(localStorage.getItem('currentUser'))
        if (this.user) {
            this.shownav = false
        } else {
            this.shownav = true
        }
    },
    methods: {
        exc() {
            this.$confirm('此操作将退出登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.shownav = true
                localStorage.removeItem('currentUser')
                localStorage.removeItem('token')
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
                this.$router.push('/login')
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出'
                });
            });
        }
    },
    computed:{
    shuju(){
      console.log(this.$store.state.user);
      return this.$store.state.user
    }
  }
}
</script>
<style scoped>
    *{margin: 0;padding: 0;}
    .myspan {
    color: #fff;
    float: right;
    height: 30px;
    line-height: 30px;
    margin: 20px;
}

.myimg {
    float: right;
    margin: 20px 10px;
    border-radius: 32px;
    vertical-align: middle
}
    .mynav{
    height: 68px;
    background: url('https://cdn.buff.163.com/static/images/site/top-bg.png');
    background-image: linear-gradient(0deg,rgba(37,60,98,.14) 0,rgba(98,127,173,.6) 99%);
    background-color: black;
    }
    .nav1{
    font-weight: 400;
    float: left;
    height: 68px;
    line-height: 68px;
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    }
    .nav2{
    font-weight: 400;
    float: right;
    height: 68px;
    line-height: 68px;
    cursor: pointer;
    margin-right: 20px;
    text-decoration: none;
    color: #fff;
    }       
</style>